<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="wrap">
			<div class="title">学生系统</div>
			<div id="form">
				<p>姓名<input id="username1" type="text" value="张三" /></p>
				<p>年龄<input id="age1" type="text" value="21" /></p>
				<span>性别
					<select id="sex1">
						<option>男</option>
						<option>女</option>
					</select>
				</span>
				<span>
					<input type="button" value="添加" id="Btn" />
				</span>
			</div>
			<table id="table">
				<thead>
					<tr>
						<th>姓名</th>
						<th>年龄</th>
		 			    <th>性别</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>

	</body>
	<script type="text/javascript">
		var tbodyEle = document.querySelector("tbody");


		Btn.onclick = function() { // 点击添加按钮的时候执行函数
			var username = username1.value; // 每次点击的时候会获取新的input框里的值
			var age = age1.value;
			var sex = sex1.value;
			var trEle = document.createElement("tr"); //是一个对象
			trEle.innerHTML = "<td>" + username + "</td><td>" + age + "</td><td>" + sex + "</td><button>删除</button>";
			console.log(trEle);
			// 把trEle放在tbody里面
			tbodyEle.appendChild(trEle);
			var delEles = document.querySelectorAll("tbody button");
			console.log(delEles);
			for (let i = 0; i < delEles.length; i++) {
				delEles[i].onclick = function() {
					//删除按钮父元素
					this.parentNode.remove();
				}
			}
		}
	</script>
</html>
